<template>
  <div class="main">
    <el-row tag="div">
      <div class="a">
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <div class="bg-main bg-hander">
            <!--  -->
            <el-col :xs="24" :sm="8" :md="8" :lg="4" :xl="4">
              <div class="bg-main hander_left">
                <span class="hander_title">
                  <span style="color:#2dafcb">HAPPY</span> MMALL
                </span>
              </div>
            </el-col>
            <el-col :xs="24" :sm="16" :md="16" :lg="20" :xl="20">
              <div class="bg-main hander_right">
                <el-popover placement="bottom-end" width="200" trigger="hover">
                  <span style="cursor:pointer" @click="del">退出登录</span>
                  <el-button type="text" class="hander_right_user" slot="reference">
                    <i class="el-icon-user-solid"></i>
                    欢迎, {{user}}
                    <i class="el-icon-arrow-down"></i>
                  </el-button>
                </el-popover>
              </div>
            </el-col>
            <!--  -->
          </div>
        </el-col>
      </div>
      <div class="b">
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <div class="bg-purple-light bg_content">
            <el-col :xs="24" :sm="8" :md="8" :lg="4" :xl="4">
              <div class="content_left">
                <el-col>
                  <el-menu
                    default-active="1"
                    class="el-menu-vertical-demo menu"
                    background-color="#545c64"
                    text-color="#fff"
                    active-text-color="#ffd04b"
                  >
                    <router-link to="/">
                      <el-menu-item index="1">
                        <i class="el-icon-menu"></i>
                        <span slot="title">首页</span>
                      </el-menu-item>
                    </router-link>

                    <el-submenu index="2">
                      <template slot="title">
                        <i class="el-icon-goods"></i>
                        <span>商品</span>
                      </template>
                      <el-menu-item-group>
                        <router-link to="/product/index/comm">
                          <el-menu-item index="1-1">商品管理</el-menu-item>
                        </router-link>
                        <router-link to="/product/index/cate">
                          <el-menu-item index="1-2">品类管理</el-menu-item>
                        </router-link>
                      </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="3">
                      <template slot="title">
                        <i class="el-icon-suitcase-1"></i>
                        <span>订单</span>
                      </template>
                      <el-menu-item-group>
                        <router-link to="/product/index/order">
                          <el-menu-item index="1-3">订单管理</el-menu-item>
                        </router-link>
                      </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="4">
                      <template slot="title">
                        <i class="el-icon-user"></i>
                        <span>用户</span>
                      </template>
                      <el-menu-item-group>
                        <router-link to="/product/index/users">
                          <el-menu-item index="1-4">用户列表</el-menu-item>
                        </router-link>
                      </el-menu-item-group>
                    </el-submenu>
                  </el-menu>
                </el-col>
              </div>
            </el-col>
            <el-col :xs="24" :sm="16" :md="16" :lg="20" :xl="20">
              <div class="content_right">
                <router-view></router-view>
              </div>
            </el-col>
          </div>
        </el-col>
      </div>
    </el-row>
  </div>
</template>

<script>
import Home from "./components/home";
import Comm from "./components/commodity";
import Cate from "./components/category";
import Order from "./components/order";
import Users from "./components/users";
export default {
  data() {
    return {
      com: Home,
      user: this.$route.params.user || localStorage.getItem("user")
    };
  },
  methods: {
    del() {
      localStorage.removeItem("admin");
      this.$router.push("/login");
    },
    tioa(item) {
      switch (item) {
        case "Home":
          this.com = Home;
          break;
        case "Comm":
          this.com = Comm;
          break;
        case "Cate":
          this.com = Cate;
          break;
        case "Order":
          this.com = Order;
          break;
        case "Users":
          this.com = Users;
          break;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/Scss/index.scss";
@media screen and (max-width: 767px) {
  .menu {
    height: 100% !important;
  }
}
.menu {
  height: 110vh;
  color: red;
}

.hander_right_user {
  float: right;
  line-height: 32px;
  color: #999;
  padding-right: 3rem;
}
.hander_title {
  color: #fff;
  @include FontSize(26px);
}
.bg-main {
  height: 60px;
}
.hander_right {
  @include Bg(#fff);
}
.hander_left {
  @include Bg(#32323a);
  text-align: center;
  line-height: 60px;
  
}
</style>